<template>
  <!-- 点击首页的导航栏跳转过来的 -->
  <div class="channel">
    <!-- 给头部的每一项都绑定点击事件 -->
    <van-tabs v-model="active" @click="changeTitleFn">
      <van-tab
        v-for="item in brotherCategory"
        :key="item.id"
        :title="item.name"
      >
        <h3>{{ item.name }}</h3>
        <p>{{ item.front_desc }}</p>
      </van-tab>
    </van-tabs>
    <GoodsList :goodsList="goodsList"></GoodsList>
  </div>
</template>

<script>
// 引入头部获取标签的接口
import { getDHDianJiData, getDHDianJiXuRanData } from "@/utils/http";

// 复用GoodsList组件
import GoodsList from "@/components/GoodsList.vue";
export default {
  name: "Channel",
  data() {
    return {
      active: 0, //当前选中的标签
      brotherCategory: [], //标题栏种类数组
      categoryId: "", //类别id
      page: 1, //当页页数
      size: 1000, //每页显示个数
      goodsList: [], //列表数组
    };
  },
  components: {
    GoodsList, //注册
  },
  methods: {
    // 头部每一项的点击事件
    changeTitleFn(item, name) {
      // item就是头部标签的id，name就是对应的名字
      // console.log(item, name);
      this.brotherCategory.forEach((i) => {
        // console.log(i);
        if (i.name == name) {
          this.categoryId = i.id;
        }
      });
      // 点击的时候调用获取列表的方法把id穿给类别id
      this.DIaoYIOng(this.categoryId);
    },
    // 把•获取分页分类页面商品列表的方法封装在一个函数中，调用的时候把id传值给类别id
    DIaoYIOng(id) {
      getDHDianJiXuRanData({
        categoryId: id,
        page: this.page,
        size: this.size,
      }).then((res) => {
        // console.log(res);
        this.goodsList = res.data.data.goodsList;
      });
    },
  },
  created() {
    // 头部标签的获取
    // console.log(this);
    getDHDianJiData({ id: this.$route.query.id }).then((res) => {
      // console.log(res);
      // 获取标题栏的数组
      this.brotherCategory = res.data.data.brotherCategory;
      // 点击过来的时候获取的id
      this.categoryId = res.data.data.currentCategory.id;
      this.brotherCategory.forEach((item, index) => {
        // item就是每一项，index就是头部的索引值
        // console.log(item, index);
        if (this.$route.query.id == item.id) {
          // 判断当点击的商品的id等于这个页面的的头部的商品id的时候
          // 就把这个页面的头部的下标赋值给选中的标签的下标
          this.active = index;
        }
      });
      // 初始化调用一下获取列表数据的方法
      this.DIaoYIOng(this.categoryId);
    });
  },
};
</script>

<style lang="less" scoped>
.channel {
  h3 {
    text-align: center;
    line-height: 50px;
    font-size: 18px;
  }
  p {
    text-align: center;
    font-size: 16px;
    line-height: 30px;
  }
}
</style>